<template>
  <el-dialog
    :title="dialogObj.title"
    append-to-body
    :visible.sync="dialogObj.show"
    :close-on-click-modal="false"
    width="600px"
  >
    <el-form
      ref="form"
      status-icon
      :model="form"
      label-width="120px"
      :disabled="dialogObj.read"
      :rules="rules"
      v-if="dialogObj.show"
    >
      <el-form-item label="楼层" prop="venueFloor" v-if="!isHaveFlorr">
        <el-radio-group
          v-model="form.venueFloor"
          @change="selectOption"
          :disabled="!!dialogObj.id"
        >
          <el-radio
            v-for="(item, index) in floorArr"
            :key="index"
            :label="item.id"
            >{{ item.value }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="图片" prop="bannerUrl">
        <upload-picture
          :imageValue="form.bannerUrl"
          @handleSuccess="handleSuccess"
        >
        </upload-picture>
        <span style="color:red;font-size:12px">推荐尺寸： 1065*402</span>
      </el-form-item>
      <el-form-item label="链接商品">
        <el-select
          v-model="form.linkUrl"
          clearable
          placeholder="请选择商品"
          value-key="index"
          size="mini"
          @change="selectLinkUrlOption"
        >
          <el-option
            v-for="(data, index) in productorList"
            :key="index"
            :label="data.productName"
            :value="data.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="sub" size="mini">确 定</el-button>
      <el-button @click="dialogObj.show = false" size="mini">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { FLOORARR2 } from "@u/wordbook";
import { _debounce } from "@u/debounce";
import { validateTemplatePicture, validateTemplateFloor } from "@u/validate";
import uploadPicture from "@c/uploadPicture";
import {
  addMerchantBannerApi,
  updateMerchantBannerApi,
  getProductinfoOptionApi
} from "@s/api";
import Cookie from "@u/cookie";
export default {
  name: "dialogCom",
  props: ["dialogObj"],
  data() {
    return {
      floorArr: FLOORARR2,
      productorList: [],
      isHaveFlorr:
        JSON.parse(localStorage.getItem("mb_userInfo")).venueFloor == 0
          ? ""
          : JSON.parse(localStorage.getItem("mb_userInfo")).venueFloor, // 是否有楼层
      form: {
        linkUrl: "",
        linkName: "",
        bannerUrl: "",
        venueFloor: "",
        merchantType: 1 //餐饮
      },
      rules: {
        bannerUrl: [
          { required: true, message: "请上传图片", trigger: "change" },
          { validator: validateTemplatePicture }
        ],
        venueFloor: [
          { required: true, message: "请选择楼层", trigger: "blur" },
          { validator: validateTemplateFloor }
        ]
      }
    };
  },
  components: {
    uploadPicture
  },
  methods: {
    initDialog() {
      let venueFloorNum =
        JSON.parse(localStorage.getItem("mb_userInfo")).venueFloor || "";
      if (this.dialogObj.id) {
        if (this.dialogObj.form.linkUrl) {
          this.form.linkUrl = Number(this.dialogObj.form.linkUrl);
        } else {
          this.form.linkUrl = "";
        }
        this.form.bannerUrl = this.dialogObj.form.bannerUrl;
        this.form.venueFloor = Number(this.dialogObj.form.venueFloor);
        this.defaultSelectOption(this.form.venueFloor);
      } else {
        this.form.linkUrl = "";
        this.form.bannerUrl = "";
        if (Number(venueFloorNum) !== 0) {
          this.form.venueFloor = Number(
            JSON.parse(localStorage.getItem("mb_userInfo")).venueFloor
          );
        } else if (Number(venueFloorNum) == 0) {
          this.form.venueFloor = "";
        }
      }
      // 判断但楼层用户
      if (Number(venueFloorNum) !== 0) {
        this.defaultSelectOption(this.form.venueFloor);
      }
    },
    // 选择id保存名字
    selectLinkUrlOption(val) {
      if (val) {
        this.productorList.forEach(item => {
          if (item.id == val) {
            this.form.linkName = item.productName;
          }
        });
      } else {
        this.form.linkName = "";
      }
    },
    handleSuccess(val) {
      this.form.bannerUrl = val;
    },
    sub: _debounce(function() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.dialogObj.id) {
            this.updateSub();
          } else {
            this.addSub();
          }
        }
      });
    }),
    addSub() {
      let json = JSON.parse(JSON.stringify(this.form));
      addMerchantBannerApi(json).then(() => {
        this.dialogObj.show = false;
        this.$emit("reflash");
        this.$message({
          type: "success",
          message: "添加成功！"
        });
      });
    },
    updateSub() {
      let json = JSON.parse(JSON.stringify(this.form));
      json.id = this.dialogObj.form.id;
      updateMerchantBannerApi(json).then(() => {
        this.dialogObj.show = false;
        this.$emit("reflash");
        this.$message({
          type: "success",
          message: "修改成功！"
        });
      });
    },
    // 默认楼层时
    defaultSelectOption(val) {
      let json = {
        productorCategory: 1, // 1 餐饮
        venueFloor: val //  楼层
      };
      getProductinfoOptionApi(json).then(res => {
        this.productorList = res;
      });
    },
    // 选择楼层时
    selectOption(val) {
      this.form.linkUrl = "";
      let json = {
        productorCategory: 1, // 1 餐饮
        venueFloor: val //  楼层
      };
      getProductinfoOptionApi(json).then(res => {
        this.productorList = res;
      });
    }
  },
  watch: {
    "dialogObj.show"(val) {
      if (val) {
        this.initDialog();
      }
    }
  }
};
</script>
<style scoped lang="scss"></style>
